﻿﻿﻿﻿﻿@extends('admin.Default')
@section('type')
    <link href="{{ asset('myadmin/css/plugins/iCheck/custom.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dataTables/dataTables.bootstrap.css') }}" rel="stylesheet">
    {{--<link href="{{ asset('myadmin/webuploader/webuploader.css') }}" rel="stylesheet">--}}
    <link href="{{ asset('myadmin/css/plugins/dropzone/basic.css') }}" rel="stylesheet">
    <link href="{{ asset('myadmin/css/plugins/dropzone/dropzone.css') }}" rel="stylesheet">
@stop
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><a data-toggle="modal" class="" href="#modal-form-one" >添加顶级分类</a></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="table_data_tables.html#">选项1</a>
                                </li>
                                <li><a href="table_data_tables.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th style="display: none">隐藏</th>

                                <th>分类名</th>
                                <th>图片</th>
                                <th>等级</th>
                                <th>所属</th>

                                <th>操作</th>

                            </tr>
                            </thead>
                            <tbody id="tbody">
                            @foreach($list as $k=>$v)
                                <tr class="gradeX" id="{{ $k+1 }}">
                                    <td>{{ $k+1 }}</td>
                                    <td style="display: none">{{ $v['id'] }}</td>
                                    <td>{{ $v['name'] }}</td>
                                    @if (count($v['pic'] ))
                                        <td><a data-toggle="modal"  href="#modal-form-photo" onclick="editImg(this)"><img src="{{ url('/upload/type/'.$v['pic']) }}" width="60" onclick="subHid(this)"></a></td>
                                    @else
                                        <td><a  data-toggle="modal" class="btn btn-primary" href="#modal-form-photo" onclick="subHid(this)">添加图片</a></td>
                                    @endif

                                    <td>{{ $v['path'] }}
                                    </td>
                                    <td>{{ $v['pname'] }}</td>
                                    <td class="center">
                                        <a data-toggle="modal" class="btn btn-primary" href="#modal-form" onclick="typeSon(this)">添加子版块</a>
                                        <a  class="btn btn-primary" onclick="delType(this)">删除</a>
                                        <a data-toggle="modal" class="btn btn-primary" onclick="editType(this)" href="#modal-form-edit">修改</a></td>


                                </tr>
                            @endforeach
                            </tbody>


                        </table>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Mainly scripts -->
    <div id="modal-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 ">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">添加子分类</h3>


                            <div class="form-group">
                                <label>父类：</label>
                                <input type="text" id="pname" placeholder="" disabled class="form-control">
                            </div>
                            <div class="form-group">
                                <label>子类：</label>
                                <input type="text" placeholder="子分类名" class="form-control" id="sub-son">
                            </div>
                            <div>

                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"   onclick="subSon()" ><strong>提交</strong>
                                </button>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-form-edit" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 ">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">更改版块名称</h3>


                            <div class="form-group">
                                <label>原名称：</label>
                                <input type="text" id="yname" placeholder="" disabled class="form-control">
                            </div>
                            <div class="form-group">
                                <label>新名称：</label>
                                <input type="text" placeholder="子分类名" class="form-control" id="sub-edit">
                            </div>
                            <div>

                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                        onclick="edit()" ><strong>更改</strong>
                                </button>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-form-edit" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12 ">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">更改版块名称</h3>


                            <div class="form-group">
                                <label>原名称：</label>
                                <input type="text" id="yname" placeholder="" disabled class="form-control">
                            </div>
                            <div class="form-group">
                                <label>新名称：</label>
                                <input type="text" placeholder="子分类名" class="form-control" id="sub-edit">
                            </div>
                            <div>

                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                        onclick="edit()" ><strong>更改</strong>
                                </button>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-form-photo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b" id="up_img">添加图片</h3>

                            <form action='/admin/type/file' method='post' enctype='multipart/form-data'>
                                <input type='hidden' name='_token' value='{{ csrf_token() }}'>
                                <input type='hidden' name='id' id="hid">
                                <div class="list list-title">

                                    <li class="head"><i>我的头像：</i><img id="pic" src="" width="80"><input style="display: none" type="file" id="img" name="photo" ><button type="button" onclick="demo();"  >点击上传<br></button></li>
                                    </ul>

                                </div>
                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                         ><strong>提交</strong>
                                </button>
                            </form>



                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-form-one" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="close"
                                    data-dismiss="modal">&times;
                            </button>
                            <h3 class="m-t-none m-b">添加顶级分类</h3>

                            <div class="form-group">
                                <label>顶级：</label>
                                <input type="text" placeholder="顶级分类名" class="form-control" id="sub-top">
                            </div>


                            <div>

                                <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"
                                        onclick="subTop()"><strong>
                                        提交</strong>
                                </button>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('script')
    <!-- iCheck -->
    <script src="{{ asset('myadmin/js/plugins/iCheck/icheck.min.js') }}"></script>
    <script src="{{ asset('myadmin/js/plugins/dropzone/dropzone.js') }}"></script>
    <script>


        function demo(){
            $("#img").click();  //隐藏了input:file样式后，点击头像就可以本地上传
            $("#img").on("change",function(){
                var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                }
            });
        }


        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
        function subTop() {
            var name = $('#sub-top').val();
            var lg = $('#tbody').children('tr');
            $.ajax({
                url: '{{url("admin/type/add")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}", name: name, type_id: 0, path: '0,'},
                success: function (data) {
                    if(lg.length < 10) {
                        var jiou = (lg.length / 2 == 1) ? 'odd' : 'even';
                        var tr = '<tr class="gradeX'+jiou+'" id="'+(lg.length+1)+'"><td>' + (lg.length + 1) + '</td><td style="display: none">' + data.id + '</td><td>' + data.name + '</td><td><a  data-toggle="modal" class="btn btn-primary" href="#modal-form-photo" onclick="subHid(this)">添加图片</a></td><td>' + data.path + '</td><td>' + data.pname + '</td><td class="center"><a data-toggle="modal" class="btn btn-primary" href="#modal-form"onclick="typeSon(this)">添加子版块</a>&nbsp;<a class="btn btn-primary" onclick="delType(this)">删除</a>&nbsp;<a data-toggle="modal" class="btn btn-primary" onclick="editType(this)" href="#modal-form-edit">修改</a></td></tr>';
                        // alert(tr);
                        $('#tbody').append(tr);
                    }
                    $('#sub-top').val('');
                    $('#modal-form-one').modal('hide');

                },
                error: function (data) {

                },
            });
        }
        //添加子版块找到父版块节点
        function typeSon(obj) {
            //获取父节点名字
            var name = $(obj).parentsUntil('#tbody').children('td').eq(2).html();
            //获取父节点id
            type_pid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            //把父节点名添加到模态框
            $('#pname').val(name);
        }

        function editType(obj) {
            //获取原节点名字
            var name = $(obj).parentsUntil('#tbody').children('td').eq(2).html();
            //获取原节点id
            yid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            did =  $(obj).parent().parent().attr('id');


            //把原节点名添加到模态框
            $('#yname').val(name);
        }
        function subHid(obj) {
            //获取原节点id
            hid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            //did =  $(obj).parent().parent().attr('id');
            src = $(obj).attr('src');
            //把原节点名添加到模态框
            $('#pic').attr('src',src);
            //把原节点名添加到模态框
            $('#hid').val(hid);
        }

        function subSon() {
            var name = $('#sub-son').val();

            var type_id = type_pid;
            var lg = $('#tbody').children('tr');

            $.ajax({
                url: '{{url("admin/type/add")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}", name:name, type_id:type_id, path:'' },
                success: function (data) {
                    if(lg.length < 10) {
                        var jiou = (lg.length / 2 == 1) ? 'odd' : 'even';
                        var tr = '<tr class="gradeX' + jiou + '" id="' + (lg.length + 1) + '"><td>' + (lg.length + 1) + '</td><td style="display: none">' + data.id + '</td><td>' + data.name + '</td><td><a  data-toggle="modal" class="btn btn-primary" href="#modal-form-photo" onclick="subHid(this)">添加图片</a></td><td>' + data.path + '</td><td>' + data.pname + '</td><td class="center"><a data-toggle="modal" class="btn btn-primary" href="#modal-form" onclick="typeSon(this)">添加子版块</a>&nbsp;<a class="btn btn-primary" onclick="delType(this)">删除</a>&nbsp;<a data-toggle="modal" class="btn btn-primary" onclick="editType(this)" href="#modal-form-edit">修改</a></td></tr>';

                    $('#tbody').append(tr);
                    }
                    $('#sub-son').val('');
                    $('#modal-form').modal('hide');

                },
                error: function (data) {

                },
            });
        }
        function editImg(obj) {
            //获取原节点id
            hid = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
            //did =  $(obj).parent().parent().attr('id');
            $('#up_img').html('更改图片');

        }
        function edit() {
            var name = $('#sub-edit').val();

            var id = yid;
//            var lg = $('#tbody').children('tr');


            $.ajax({
                url: '{{ url("admin/type/edit") }}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}",name:name,id:id },
                success: function (data) {
                    if(data>0){
                        $('#'+did).children('td').eq(2).html(name);
                    }

                    $('#modal-form').modal('hide');

                },
                error: function (data) {
                    alert(111111);
                },
            });
        }
        function delType(obj) {


            var id = $(obj).parentsUntil('#tbody').children('td').eq(1).html();

            //alert(id);
            $.ajax({
                url: '{{url("admin/type/query")}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}", id:id},
                success: function (data) {
                    if(confirm(data.name)){
                        //alert("点击了确认按钮");
                        var id = $(obj).parentsUntil('#tbody').children('td').eq(1).html();
                        //alert(id);
                        $.ajax({
                            url: '{{url("admin/type/del")}}',
                            type: 'POST',
                            dataType: 'json',
                            cache: false,
                            data: {_token: "{{ csrf_token() }}", id: id},
                            success: function (data) {
                                if(data>0){
//                                    $(obj).parent().parent().css('display','none');
                                    $(obj).parentsUntil('#tbody').children('td').remove();
                                }
                                // alert(data);
                                // $('#modal-form-one').modal('hide');
                            },
                            error: function (data) {
                            },
                        });
                    }
                },
                error: function (data) {
//                    alert(22222);
                    alert('已经删除过了，请刷新重试！');
                },
            });
        }
    </script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
            $('.dataTables-example').dataTable();
            /* Init DataTables */
            var oTable = $('#editable').dataTable();
            /* Apply the jEditable handlers to the table */
            oTable.$('td').editable('../example_ajax.php', {
                "callback": function (sValue, y) {
                    var aPos = oTable.fnGetPosition(this);
                    oTable.fnUpdate(sValue, aPos[0], aPos[1]);
                },
                "submitdata": function (value, settings) {
                    return {
                        "row_id": this.parentNode.getAttribute('id'),
                        "column": oTable.fnGetPosition(this)[2]
                    };
                },
                "width": "90%",
                "height": "100%"
            });
            function fnClickAddRow() {
                $('#editable').dataTable().fnAddData([
                    "Custom row",
                    "New row",
                    "New row",
                    "New row",
                    "New row"]);
            }
        });
    </script>
@stop